<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘好货 - 订单详情</title>
    <script src="/static/css/tailwindcss.css"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF4400', // 主色调：橙色
                        secondary: '#FFB800', // 辅助色：黄色
                        dark: '#333333',    // 深色文本
                        light: '#F5F5F5',   // 浅色背景
                        muted: '#666666',   // 次要文本
                        success: '#00B42A', // 成功色
                        warning: '#FF7D00', // 警告色
                        danger: '#F53F3F',  // 危险色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .progress-step {
                @apply relative flex flex-col items-center justify-center;
            }

            .progress-line {
                @apply absolute top-6 left-1/2 w-full h-1 bg-gray-200;
            }

            .progress-line-completed {
                @apply bg-primary;
            }

            .step-circle {
                @apply w-12 h-12 rounded-full flex items-center justify-center z-10 text-sm font-medium;
            }

            .step-circle-completed {
                @apply bg-primary text-white;
            }

            .step-circle-active {
                @apply bg-primary text-white ring-4 ring-primary/30;
            }

            .step-circle-pending {
                @apply bg-gray-100 text-gray-400;
            }

            .step-label {
                @apply mt-2 text-sm font-medium;
            }

            .step-label-completed {
                @apply text-primary;
            }

            .step-label-active {
                @apply text-primary font-bold;
            }

            .step-label-pending {
                @apply text-gray-400;
            }
        }
    </style>
</head>
<body class="bg-gray-50 text-dark">
<div id="app">
    <!-- 导航栏 -->
    <navigation></navigation>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        <!-- 返回按钮 -->
        <div class="mb-6">
            <a href="/order"
               class="inline-flex items-center text-muted hover:text-primary transition-colors">
                <i class="fa fa-arrow-left mr-2"></i> 返回我的订单
            </a>
        </div>

        <!-- 加载状态 -->
        <div v-if="loading" class="py-20 flex justify-center items-center">
            <div class="animate-spin rounded-full h-16 w-16 border-b-4 border-primary"></div>
        </div>

        <!-- 错误状态 -->
        <div v-else-if="error" class="py-20 flex flex-col items-center">
            <i class="fa fa-exclamation-circle text-5xl text-red-400 mb-4"></i>
            <p class="text-xl text-gray-600">{{ errorMessage }}</p>
            <button class="mt-6 px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                    @click="fetchOrderDetail">
                重试
            </button>
        </div>

        <!-- 订单详情 -->
        <div v-else-if="orderDetail" class="space-y-8">
            <!-- 订单信息卡片 -->
            <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="bg-primary/5 px-6 py-4 border-b border-gray-100">
                    <div class="flex flex-wrap justify-between items-center">
                        <div>
                            <h2 class="text-xl font-bold mb-1">订单详情</h2>
                            <p class="text-sm text-muted">订单号: {{ orderDetail.order_number }}</p>
                        </div>
                        <div class="mt-2 md:mt-0">
                            <span :class="getStatusBadgeClass(orderDetail.order_status)"
                                  class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium">
                                <i :class="getStatusIconClass(orderDetail.order_status)"
                                   class="mr-1"></i> {{ orderDetail.order_status }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- 订单状态进度条 -->
                <div class="px-6 py-8">
                    <h3 class="text-lg font-semibold mb-6">订单状态</h3>

                    <div class="flex justify-between relative">
                        <!-- 进度线 -->
                        <div class="progress-line"></div>
                        <div class="progress-line progress-line-completed"
                             :style="{ width: getProgressPercentage() + '%' }"></div>

                        <!-- 步骤1: 已下单 -->
                        <div class="progress-step w-1/5">
                            <div :class="getStepCircleClass(1)" class="step-circle">
                                <i v-if="getStatusStep() >= 1" class="fa fa-check"></i>
                                <span v-else>1</span>
                            </div>
                            <span :class="getStepLabelClass(1)" class="step-label">已下单</span>
                            <span class="text-xs text-gray-500 mt-1">{{ formatDate(orderDetail.created_at) }}</span>
                        </div>

                        <!-- 步骤2: 已支付 -->
                        <div class="progress-step w-1/5">
                            <div :class="getStepCircleClass(2)" class="step-circle">
                                <i v-if="getStatusStep() >= 2" class="fa fa-check"></i>
                                <span v-else>2</span>
                            </div>
                            <span :class="getStepLabelClass(2)" class="step-label">已支付</span>
                            <span class="text-xs text-gray-500 mt-1">{{ formatDate(orderDetail.payment_time) }}</span>
                        </div>

                        <!-- 步骤3: 已发货 -->
                        <div class="progress-step w-1/5">
                            <div :class="getStepCircleClass(3)" class="step-circle">
                                <i v-if="getStatusStep() >= 3" class="fa fa-check"></i>
                                <span v-else>3</span>
                            </div>
                            <span :class="getStepLabelClass(3)" class="step-label">已发货</span>
                        </div>

                        <!-- 步骤4: 已送达 -->
                        <div class="progress-step w-1/5">
                            <div :class="getStepCircleClass(4)" class="step-circle">
                                <i v-if="getStatusStep() >= 4" class="fa fa-check"></i>
                                <span v-else>4</span>
                            </div>
                            <span :class="getStepLabelClass(4)" class="step-label">已送达</span>
                        </div>

                        <!-- 步骤5: 已完成 -->
                        <div class="progress-step w-1/5">
                            <div :class="getStepCircleClass(5)" class="step-circle">
                                <i v-if="getStatusStep() >= 5" class="fa fa-check"></i>
                                <span v-else>5</span>
                            </div>
                            <span :class="getStepLabelClass(5)" class="step-label">已完成</span>
                        </div>
                    </div>
                </div>

                <!-- 配送信息 -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6 px-6 py-8 border-t border-gray-100">
                    <div>
                        <h3 class="text-lg font-semibold mb-4">收货信息</h3>
                        <div class="space-y-2">
                            <p><span class="text-muted">收货人:</span> {{ orderDetail.address.recipient_name }}</p>
                            <p><span class="text-muted">联系电话:</span> {{ orderDetail.address.recipient_phone }}</p>
                            <p class="text-sm"><span
                                    class="text-muted">收货地址:</span> {{ orderDetail.address.shipping_address }}</p>
                            <p><span class="text-muted">配送方式:</span> 顺丰速运</p>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-4">支付信息</h3>
                        <div class="space-y-2">
                            <p><span class="text-muted">支付方式:</span> {{ orderDetail.payment_method }}</p>
                            <p><span class="text-muted">支付时间:</span> {{ orderDetail.payment_time }}</p>
                            <p><span class="text-muted">交易单号:</span>
                                {{ orderDetail.transaction_id || '20250522234567890123' }}</p>
                        </div>
                    </div>

                    <div>
                        <h3 class="text-lg font-semibold mb-4">订单信息</h3>
                        <div class="space-y-2">
                            <p><span class="text-muted">下单时间:</span> {{ orderDetail.created_at }}</p>
                            <p><span class="text-muted">预计送达:</span> {{ getEstimatedDeliveryDate() }}</p>
                            <p><span class="text-muted">订单备注:</span> 无</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 商品列表 -->
            <div class="bg-white rounded-xl shadow-md">
                <div class="px-6 py-4 border-b border-gray-100">
                    <h2 class="text-xl font-bold">商品信息</h2>
                </div>

                <div class="divide-y divide-gray-100">
                    <div v-for="product in orderDetail.products" :key="product.id"
                         class="px-6 py-5 flex flex-col md:flex-row items-start md:items-center">
                        <img :src="product.image || 'https://picsum.photos/200/200?random=' + product.id" alt="商品图片"
                             class="w-20 h-20 object-cover rounded-md mb-3 md:mb-0">
                        <div class="ml-0 md:ml-4 flex-1">
                            <h3 class="text-base font-medium">{{ product.name }}</h3>
                        </div>
                        <div class="ml-0 md:ml-4 mt-2 md:mt-0 text-right">
                            <div class="font-medium">¥{{ formatPrice(product.price) }}</div>
                            <div class="text-sm text-muted">x{{ product.quantity }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 价格详情 -->
            <div class="bg-white rounded-xl shadow-md">
                <div class="px-6 py-4 border-b border-gray-100">
                    <h2 class="text-xl font-bold">价格详情</h2>
                </div>

                <div class="px-6 py-5">
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">商品总价</span>
                            <span>¥{{ formatPrice(orderDetail.subtotal) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">运费</span>
                            <span>¥{{ formatPrice(orderDetail.shipping_fee) }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">优惠券</span>
                            <span class="text-green-500">-¥{{ formatPrice(orderDetail.coupon_discount) }}</span>
                        </div>
                        <div class="border-t border-gray-100 pt-3 flex justify-between font-medium">
                            <span>实付款</span>
                            <span class="text-lg text-primary font-bold">¥{{ formatPrice(orderDetail.total_amount) }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 操作按钮 -->
            <div class="flex flex-wrap justify-end space-x-4 py-6">
                <button v-if="orderDetail.order_status === '待支付'"
                        class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                        @click="payOrder">
                    立即支付
                </button>
                <button v-if="orderDetail.order_status === '待发货'"
                        class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
                        @click="cancelOrder">
                    取消订单
                </button>
                <button v-if="orderDetail.order_status === '待收货'"
                        class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
                        @click="checkLogistics">
                    查看物流
                </button>
                <button v-if="orderDetail.order_status === '待收货'"
                        class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                        @click="confirmReceipt">
                    确认收货
                </button>
                <button v-if="orderDetail.order_status === '已完成'"
                        class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                        @click="reviewProduct">
                    评价商品
                </button>
                <button v-if="orderDetail.order_status === '已完成'"
                        class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
                        @click="buyAgain">
                    再次购买
                </button>
                <button
                        class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
                        @click="contactCustomerService">
                    联系客服
                </button>
                <button
                        class="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                        @click="applyAfterSales">
                    申请售后
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <app-footer></app-footer>
</div>

</body>
<script src="/static/js/vue.js"></script>
<script src="/static/js/top.js"></script>
<script src="/static/js/foot.js"></script>
<script src="/static/js/common.js"></script>
<script src="/static/js/message.js"></script>
<script>
    // Vue实例
    new Vue({
        el: '#app',
        data: {
            util,
            orderId: null,
            orderDetail: null,
            loading: true,
            error: false,
            errorMessage: ''
        },
        mounted() {
            util.store.set("return-url", location.href);
            if (this.util.isLogin()) {
                // 从URL中获取订单ID
                const urlParams = new URLSearchParams(window.location.search);
                this.orderId = urlParams.get('order_id');
                if (this.orderId) {
                    this.fetchOrderDetail();
                } else {
                    this.error = true;
                    this.errorMessage = '订单ID不存在';
                    this.loading = false;
                }
            } else location.href = '/login';
        },
        methods: {
            // 获取订单详情
            async fetchOrderDetail() {
                this.loading = true;
                this.error = false;

                try {
                    const response = await fetch(`/orders/${this.orderId}`);

                    if (!response.ok) {
                        const error = await response.json();
                        this.errorMessage = error.message;
                    }

                    const res = await response.json();
                    this.orderDetail = res.data;
                } catch (error) {
                    this.error = true;
                    this.errorMessage = "网络错误，请稍后重试";
                } finally {
                    this.loading = false;
                }
            },

            // 格式化价格
            formatPrice(price) {
                return parseFloat(price).toFixed(2);
            },

            // 格式化日期
            formatDate(dateString) {
                if (!dateString) return '';
                const date = new Date(dateString);
                return `${date.getMonth() + 1}-${date.getDate()} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`;
            },

            // 获取状态徽章类
            getStatusBadgeClass(status) {
                switch (status) {
                    case '待支付':
                        return 'bg-primary/10 text-primary';
                    case '已支付':
                        return 'bg-success/10 text-success';
                    case '待发货':
                    case '待收货':
                        return 'bg-warning/10 text-warning';
                    case '已送达':
                        return 'bg-info/10 text-info';
                    case '已完成':
                        return 'bg-success/10 text-success';
                    case '已取消':
                        return 'bg-danger/10 text-danger';
                    default:
                        return 'bg-gray/10 text-gray';
                }
            },

            // 获取状态图标类
            getStatusIconClass(status) {
                switch (status) {
                    case '待支付':
                        return 'fa-clock-o';
                    case '已支付':
                        return 'fa-credit-card-alt';
                    case '待发货':
                    case '待收货':
                        return 'fa-truck';
                    case '已送达':
                        return 'fa-map-marker';
                    case '已完成':
                        return 'fa-check-circle-o';
                    case '已取消':
                        return 'fa-times-circle';
                    default:
                        return 'fa-info-circle';
                }
            },

            // 获取状态步骤
            getStatusStep() {
                if (!this.orderDetail) return 0;

                switch (this.orderDetail.order_status) {
                    case '待支付':
                        return 1;
                    case '已支付':
                        return 2;
                    case '待发货':
                        return 2;
                    case '待收货':
                        return 3;
                    case '已送达':
                        return 4;
                    case '已完成':
                        return 5;
                    default:
                        return 0;
                }
            },

            // 获取进度百分比
            getProgressPercentage() {
                const step = this.getStatusStep();
                return ((step - 1) / 4) * 100;
            },

            // 获取步骤圆圈类
            getStepCircleClass(step) {
                const currentStep = this.getStatusStep();

                if (step < currentStep) {
                    return 'step-circle-completed';
                } else if (step === currentStep) {
                    return 'step-circle-active';
                } else {
                    return 'step-circle-pending';
                }
            },

            // 获取步骤标签类
            getStepLabelClass(step) {
                const currentStep = this.getStatusStep();

                if (step < currentStep) {
                    return 'step-label-completed';
                } else if (step === currentStep) {
                    return 'step-label-active';
                } else {
                    return 'step-label-pending';
                }
            },

            // 获取预计送达日期
            getEstimatedDeliveryDate() {
                if (!this.orderDetail) return '';

                const orderDate = new Date(this.orderDetail.created_at);
                // 预计3天后送达
                orderDate.setDate(orderDate.getDate() + 3);

                const year = orderDate.getFullYear();
                const month = String(orderDate.getMonth() + 1).padStart(2, '0');
                const day = String(orderDate.getDate()).padStart(2, '0');

                return `${year}-${month}-${day} 09:00-18:00`;
            },

            // 支付订单
            payOrder() {
                console.log('支付订单:', this.orderId);
                // 这里应该跳转到支付页面
                window.location.href = `/pay?order_id=${this.orderId}`;
            },

            // 取消订单
            async cancelOrder() {
                if (confirm('确定要取消此订单吗？')) {
                    try {
                        const response = await fetch(`/orders/${this.orderId}`, {
                            method: 'DELETE',
                        });

                        if (!response.ok) {
                            const error = await response.json();
                            this.errorMessage = error.message;
                        }

                        message.success('订单已取消');
                        await this.fetchOrderDetail();
                    } catch (error) {
                        this.errorMessage = "网络错误，请稍后重试";
                    }
                }
            },

            // 查看物流
            checkLogistics() {
                console.log('查看物流:', this.orderId);
                // 这里应该跳转到物流详情页面
            },

            // 确认收货
            confirmReceipt() {

            },

            // 评价商品
            reviewProduct() {
                console.log('评价商品:', this.orderId);
                // 这里应该跳转到评价页面

            },

            // 再次购买
            buyAgain() {
                console.log('再次购买:', this.orderId);
                // 这里应该添加商品到购物车或直接创建新订单
            },

            // 联系客服
            contactCustomerService() {
                console.log('联系客服');
                // 这里应该打开客服聊天窗口
            },

            // 申请售后
            applyAfterSales() {
                console.log('申请售后:', this.orderId);
                // 这里应该跳转到售后申请页面
            }
        }
    });
</script>
</html>